<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no" />
	<title>速翔网络</title>
	<link rel="stylesheet" type="text/css" href="../c/aui.css" />
	<link rel="stylesheet" type="text/css" href="../c/swiper.min.css" />
	<style>
		body {
			background-color: rgba(234, 49, 29,1);
			color: #ffcf9e;
		}
		#sx-header .aui-pull-left {
			width: 3rem;
		}
		#sx-header .aui-pull-left img{
			position: absolute;
			top: 0.25rem;
			left: 0.4rem;
			width: 1.8rem;
		}
		#sx-header{
			position: fixed;
			top: 0;
			left: 0;
			background-color:rgba(254, 44, 85, 0);
		}
		#sx-header .aui-title{
			opacity: 0;
		}
		.t{
			/*background: #f00;*/

			background-image: linear-gradient(rgba(250, 126, 52, 1), rgba(250, 126, 52,0));
			position: relative;
		}
		.t .img{
			width: 100%;
			height: auto;
			position: relative;
		}
		.t .text{
			position: relative;
			text-align: center;
			margin: 0 0.3rem;
			margin-top: -1.5rem;
		}
		.t .text img{
			width: 100%;
			height: 3rem;
			position: relative;
		}
		.t .text div{
			position: absolute;
			top: 0;
			left: 0;
			text-align: center;
			width: 100%;
			line-height: 2.8rem;
			font-size: 0.8rem;
		}
		.gun{
			overflow: hidden;
			margin: 0 0.75rem;
			height: 1.5rem;
			line-height: 1.5rem;
			border-radius: 5rem;
			background:rgba(0, 0, 0, 0.1);
			margin-top: 0.25rem;
		}
		.gun .swiper-wrapper{
			overflow: hidden;
			height: auto;
		}
		.gun .aui-ellipsis{
			/*width: 3rem;*/
		}
    .swiper-slide {
      text-align: center;
			overflow: hidden;
			font-size: 0.65rem;
    }
		.gun .swiper-slide{
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 1.5rem;
			padding: 0 0.2rem;
		}
		.gun .swiper-slide .l img{
			width: 1rem;
			border-radius: 50%;
			margin-left: 0.1rem;
		}
		.gun .swiper-slide .l{
			display: flex;
			justify-content:space-between;
			align-items: center;
		}
		.gun .swiper-slide .l div{
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.gun .swiper-slide .l div span{
			padding-left: 0.2rem;
		}
		.gun .swiper-slide .r{
			padding-right: 0.35rem;
		}
		.b{
			background: #fdddb4 url('../i/hongbao/t_by.png');
			background-repeat: no-repeat;
			background-size: 4rem;
			background-position: top right;
			margin: 0.75rem;
			border-radius: 0.65rem;
			padding: 0.3rem;
			color: #7e4621;
			font-size: 0.75rem;
			position: relative;
		}
		.b .content{
			border: 1px solid #e5c096;
			height: 100%;
			border-radius: 0.65rem;
		}
		.b .b1{
			display: flex;
			justify-content: center;
			align-items: center;
			background:#f7d5a5;
			border-radius: 2rem;
			padding: 0.15rem 0;
			font-size: 0.6rem;
			color: #cb3536;
			width: 5rem;
			margin: 0 auto;
			margin-top: 0.75rem;
		}
		.b .b1 img{
			width:0.65rem;
			margin-right: 0.25rem;
		}
		.b .b2{
			text-align: center;
			color: #cb3536;
			font-size: 1rem;
			/*margin-top: 0.5rem;*/
		}
		.b .b2 b{
			font-size:2.5rem;
			font-weight: bold;
			letter-spacing: 2px;
			padding-left: 0.3rem;
		}
		.b .b3 {
			text-align: center;
			color: #9f5d3a;
			font-size: 0.75rem;
		}
		.b .b3 #time{
			font-size: 0.85rem;
		}
		.b .b3 span:last-child{
 			padding-left: 0.3rem;
		}
		.b .b4{
			font-size: 0.6rem;
			text-align: center;
			color: #d28f5e;
			padding-top: 0.25rem;
		}
		.b .b5{
			text-align: center;
			margin: 0 auto;
			margin-top: 1rem;
			position: relative;
			color: #fcc79b;
		}
		.b .b5 img{
			position: relative;
			height: 2.5rem;
			text-align: center;
			margin: 0 auto;
			width: 88%;
		}
		.b .b5 div{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			line-height: 2.5rem;
			font-size: 0.75rem;
			color: #fdc296;
			font-size: 1rem;
		}
		.b .b6{
			margin: 0 1rem;
			margin-top: 1rem;
			position: relative;
			height: 1.5rem;
		}
		.b .b6 img{
			padding-top: 0.5rem;
		}
		.b .b6 div.b6_btn{
			background: #fdd2a5;
			border-radius: 2rem;
			display: inline-block;
			font-size: 0.65rem;
			color: #cb3536;
			height: 1.5rem;
			line-height: 1.5rem;
			margin: 0 auto;
			text-align: center;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			width: 10rem;
		}
		.b .b6 div.b6_btn span.aui-iconfont{
			font-weight: bold;
			font-size: 0.55rem;
		}
		.b7{
			text-align: center;
			padding: 0.5rem 0;
			color: #af332b;
			font-size: 0.85rem;
			font-weight: bold;
		}
		.list{
			padding: 0.75rem;
			padding-top: 0.5rem;
		}
		.list .li{
			display: flex;
			justify-content:space-between;
			align-items: center;
			padding-bottom: 1rem;
			color: #7e4d24;
		}
		.list .li:last-child{
			padding-bottom: 0;
		}
		.list .li .l img{
			width: 2rem;
			border-radius: 50%;
			margin-right: 0.5rem;
		}
		.list .li .l .user{
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		.list .li .l .user .title{
			font-size: 0.75rem;
			padding-bottom: 0.15rem;
		}
		.list .li .l .user .p{
			font-size: 0.6rem;
		}
		.list .li .r{
			font-size: 0.7rem;
			width: 5.5rem;
			text-align: right;
		}
		.b .right{
			position: absolute;
			top: 0;
			margin-top: 0.5rem;
			right: 0;
		}
		.b .left{
			position: absolute;
			top: 0;
			margin-top: 0.5rem;
			left: 0;
		}
		.b .left div,.b .right div{
			background: #fbc388;
			color: #b73221;
			padding: 0.25rem 0.75rem;
			font-size: 0.6rem;
			margin-top: 0.75rem;
			box-shadow: 0px 0px 25px -7px #222;
		}
		.b .right div{
			border-top-left-radius: 0.75rem;
			border-bottom-left-radius: 0.75rem;
			padding-right: 1rem;
		}
		.b .left div{
			border-top-right-radius: 0.75rem;
			border-bottom-right-radius: 0.75rem;
			padding-left: 1rem;
		}

	</style>
</head>
<body>
	<header class="aui-bar aui-bar-nav" id="sx-header">
		<a class="aui-pull-left aui-btn" tapmode onclick="_close()">
			<img src="../i/hongbao/left.png"/>
		</a>
		<div class="aui-title">天天折红包</div>
	</header>
	<div class="aui-content">
		<div class="t">
			<img src="../i/hongbao/t.png" class="img" />
			<div class="text">
				<img src="../i/hongbao/t_text.png" >
				<div>今日已折出￥<b id="money_sum">0</b></div>
			</div>
	    <div class="gun">
				<script id="sx-list-gun" type="text/x-dot-template">
					{{ for(var i=0; i < it.length; i++) { }}
		      <div class="swiper-slide">
						<div class="l">
							<img suxiangw-src="{{= it[i].img ? _img(it[i].img,60,60) : '../i///qiniu.live.kxg99.comy../i/o/touxiang.png' }}" src="'../i/touxiang.png'" />
							<div><span class="aui-ellipsis">{{= it[i].username }}</span><span>邀请{{= it[i].num }}名新朋友助力</span></div>
						</div>
						<div class="r">已提现100元</div>
					</div>
					{{ } }}
				</script>
		    <div class="swiper-wrapper" id="sx-view-gun"></div>
	    </div>
		</div>
		<div class="b">
			<div class="content">
				<div class="left">
					<div class="r1" tapmode onclick="tan('hongbao_guize')">
						规则
					</div>
				</div>
				<div class="right" tapmode onclick="tan('hongbao_tixian')">
					<div class="r1">
						提现
					</div>
				</div>
				<div class="b1">
					<img src="../i/hongbao/b_shou.png" />手气最佳
				</div>
				<div class="b2">
					￥<b id="money"></b>
				</div>
				<div class="b3">
					<span id="time"></span><span>后现金将失效</span>
				</div>
				<div class="b4">累计到100元就能体现到微信零钱</div>
				<div class="b5 sx-btn-animation" tapmode onclick="an()">
					<img src="../i/hongbao/b5.png" />
					<div>邀亲朋好友，立即提现</div>
				</div>
				<div class="b6">
					<img src="../i/hongbao/b6.png" >
					<div class="b6_btn"><div>活动入口通知 <span class="aui-iconfont aui-icon-right"></span></div></div>
				</div>
				<div class="b7">
					邀请【新用户】体现更快速
				</div>
				<script id="sx-list-list" type="text/x-dot-template">
					{{ for(var i=0; i < it.length; i++) { }}
					<div class="li">
						<div class="l">
							<div class="user">
								<img suxiangw-src="{{= it[i].user.img ? _img(it[i].user.img,60,60) : '../i///qiniu.live.kxg99.com../i/bo/touxiang.png' }}" src='../i/touxiang.png' />
								<div>
									<div class="title aui-ellipsis">{{= it[i].user.username}}</div>
									<div class="p">{{= it[i].text}}</div>
								</div>
							</div>
						</div>
						<div class="r">{{= it[i].content}}</div>
					</div>
					{{ } }}
				</script>
				<div class="list" id="sx-view-list"></div>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript" src="../j/swiper.min.js"></script>
<script type="text/javascript" src="../j/api.js"></script>
<script src="../j/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
	var go_time =_data= 0;
		function urlsa() {
			var imglen = $("img").length;
			var picurls = picurl + "/hongbao";
			for (var i = 0; i < imglen; i++) {
				var tpl = $("img").eq(i).attr("src");
				// console.log(tpl)
				tpls = tpl.replace("../i/hongbao", picurls);
				$("img").eq(i).attr("src", tpls);
		
			}
		}
	apiready = function() {
		_loading();
		data();
		urlsa();
		api.parseTapmode();
		header = $api.byId('sx-header');
		$api.fixStatusBar(header);
		header_h = $api.offset(header).h;
		w = api.winWidth
		$(window).on('scroll', function() {
			var sTop = $(window).scrollTop();
			var a = (sTop-(header_h/2))/(header_h);
			$('#sx-header').css('background-color','rgba(234, 49, 29, '+a+')');
			// $('#sx-header img.l').css('opacity',a);
			$('#sx-header .aui-title').css('opacity',a);
		});
	}
	function data(type){
		if(type){
			setTimeout(function(){
					kaitan(type);
			},1000)
		}
		_ajax('renwu/hongbao_info',function(ret,err){
			_loadingCloes();
			if(ret){
				if(ret.ret){
					$('#money').text(ret.ret.money);
					$('#money_sum').text(ret.ret.money_sum);
					_data = ret.ret;
					console.log(JSON.stringify(_data))
					var evalData = doT.template($api.html($api.byId('sx-list-gun')));
				 	$api.html($api.byId('sx-view-gun'), evalData(ret.gun));
					var swiper = new Swiper('.gun',{
						direction: 'vertical',
						autoplay: {
			        delay: 2000,
			        disableOnInteraction: false,
			      },
						loop: true,
					});
					if(_data.money >= 100){
						if(_data.hongbao_tixian){
							hide(2)
						}else{
							hide(1);
						}
					}else{
						go_time = new Date(ret.ret.time);
						countdown();
					}


					var evalData = doT.template($api.html($api.byId('sx-list-list')));
				 	$api.html($api.byId('sx-view-list'), evalData(ret.list));
					_imageCache();

					return;
				}else if(ret.hongbao_num){
					tan('hongbao_kai',{hongbao_num:ret.hongbao_num});
				}else if(ret.err){
					_alert(ret.err,function(ret,err){
						_close();
					})
				}else{
					hide();
				}
				// console.log(JSON.stringify(ret))
				// hide();
			}else{
				_alert(JSON.stringify(err))
			}
		})
	}
	function hide(a){
		var text = '提现失败';
		var text2= '时间已到';
		if(a == 1){
			text = '立即提现100元';
			text2 = '恭喜你已满100元';
		}else if(a == 2){
			text2 = '等待提现通过后，第二天可重新获取红包';
			text = '提现审核中，请耐心等待';
		}else{

		}
		$('.b5 div').text(text);
		$('.b3').text(text2)
		$('.b5').removeClass('sx-btn-animation');

	}

	function  countdown(){
	   var now_time = new Date();
	   var alltime = go_time.getTime() - now_time.getTime();  //总的时间（毫秒）
	   //console.log(alltime);   1s =1000ms  1分=60s   1时 =60分  1天 =24时   1月=30天  1年=12月
	   var haoscend =alltime%1000;  //毫秒
		 haoscend = haoscend.toString().charAt(0);
	   var scend = parseInt ((alltime/1000)%60  ) ;  //秒
	   var minute =parseInt((alltime/1000/60)%60  ) ;  //  分钟
	   var hour =parseInt((alltime/1000/60/60)%24 ) ;   //小时
		 if(hour <= 0 && minute <= 0 && scend <= 0){
			 return hide();
		 }
		 if(scend < 10){
			 scend = '0'+scend;
		 }
		 if(minute < 10){
			 minute = '0'+minute;
		 }
		 if(hour < 10){
			 hour = '0'+hour;
		 }


	  //  var day=parseInt((alltime/1000/60/60/24)%30);   //天数
	  //  var month=parseInt((alltime/1000/60/60/24/30)%12); //月
	   var time1=document.getElementById("time");
	   time1.innerHTML = hour+":"+minute +":"+scend +":"+haoscend;
	   window.requestAnimationFrame(countdown );   //不加括号
   }
	 function tan(url,data){
		 api.openFrame({
			 name: url,
			 url: _h_w + url + '.html',
			 rect: {
				 x: 0,
				 y: 0,
				 w: 'auto',
				 h: 'auto',
			 },
			 bgColor: 'rgba(0,0,0,0)',
			 pageParam:data
		 })
	 }
	 function an(){
		 if(_data.hongbao_tixian){
			 return _msg('提现审核中，请耐心等待');
		 }
		 if(_data.money >= 100){
			 _loading();
				_ajax('renwu/tixian_add',function(ret,err){
					_loadingCloes();
					if(ret){
						if(ret.ret){
							data();
							tan('hongbao_tixian_add')
						}else{
							_msg(ret.err);
						}
						return;
					}else{
						console.log(JSON.stringify(err))
					}
					tan('hongbao_tixian_msg',{money:_data.money})
				})
		 }else{
			 tan('hongbao_tixian_msg',{money:_data.money})
		 }

	 }
	 function kaitan(money){
		 api.closeFrame({
		     name: 'hongbao_kai'
		 });
 		var url = 'hongbao_tixian_msg';
 		api.openFrame({
 			name: url,
 			url: _h_w + url + '.html',
 			rect: {
 				x: 0,
 				y: 0,
 				w: 'auto',
 				h: 'auto',
 			},
 			bgColor: 'rgba(0,0,0,0)',
 			pageParam:{
 				money:money
 			}
 		})
 	}



</script>
</html>
